<template>
  <div class="header">
    <div class="page-top">
      <span class="left-part">数字迎新服务平台</span>
      <span class="r-part">
          <router-link to="/self">自助报到</router-link>
      </span>
      <span class="right-part">
          <router-link to="/admin">后台</router-link>
      </span>
    </div>
      <div class="banner">
        <swiper
          :slidesPerView="1"
          :loop="true"
          :pagination="{
            clickable: true,
          }"
          :navigation="true"
          :modules="modules"
          :autoplay="{
            delay: 2500, // 自动播放间隔时间
            disableOnInteraction: false, // 用户操作后是否停止自动播放
          }"
          class="mySwiper"
        >
          <swiper-slide><img :src="require('@/assets/16705784433680.jpg')" alt="校园图片"/></swiper-slide>
          <swiper-slide><img :src="require('@/assets/16533741154937.jpg')" alt="校园图片"/></swiper-slide>
          <swiper-slide><img :src="require('@/assets/16042836168236.jpg')" alt="校园图片"/></swiper-slide>
        </swiper>
      </div>
      <!-- 回到顶部 -->
      <el-backtop />
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Autoplay,Pagination, Navigation } from 'swiper/modules';

export default {
name: 'HomeTop',
components: {
  Swiper,
  SwiperSlide,
},
setup() {
    return {
      modules: [Autoplay,Pagination,Navigation],
    };
  },
};
</script>

<style scoped>
.left-part{
  position: relative;
  left: 30px;
  font-family: "华文行楷", sans-serif;
}
.right-part{
  position: relative;
  right: 60px;
  border-width: 0px;
  background-color: #124768;
  border-radius: 10px;
  height: 50px;
  width: 130px;
}
.r-part{
  position: absolute;
  right: 210px;
  border-width: 0px;
  background-color: #124768;
  border-radius: 10px;
  height: 50px;
  width: 130px;
}
.banner img{
  width: 100%;
}
.page-top{
  height: 85px;
  background-color: #006633;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 35px;
  color: rgb(255, 255, 255);
}
/* 点击时去掉下划线 */
.router-link-active {     
  text-decoration: none;
}
/* 去掉原有链接文字下划线 */
a {
  text-decoration: none; 
  font-size: 20px;
  color: #ffffff;
}
</style>